<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Play Video on Button Click</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  #videoSection {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* 初始时不显示视频部分 */
  }
  video {
    width: 100%;
    height: auto;
  }
  #playButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
  @media (orientation: portrait) {
    /* 竖屏模式下的样式 */
  }
  @media (orientation: landscape) {
    /* 横屏模式下的样式 */
  }
</style>
</head>
<body>

<!-- 按钮 -->
<button id="playButton">神奇的按钮</button>

<!-- 视频部分 -->
<div id="videoSection">
  <video id="myVideo" controls>
    <source src="video.mp4" type="video/mp4">
    <!-- 可以添加其他视频格式源，如WebM等 -->
    Your browser does not support the video tag.
  </video>
</div>

<script>
document.getElementById('playButton').addEventListener('click', function() {
  // 显示视频部分并播放视频
  var videoSection = document.getElementById('videoSection');
  var video = document.getElementById('myVideo');
  videoSection.style.display = 'block'; // 显示视频部分
  video.play(); // 播放视频
});
</script>

</body>
</html>